<template>
    <page-main>
        <el-table
            ref="multipleTable"
            :header-cell-style="{background:'#F3F4F7',color:'#555'}"
            :data="tableData"
            style="width: 100%; margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            @selection-change="handleSelectionChange"
            @select-all="selectAll"
        >
            <el-table-column
                type="selection"
                width="40"
                align="center"
            />
            <el-table-column
                prop="label"
                label="资源名称"
            />
            <el-table-column
                prop="type.desc"
                label="资源类型"
            />
        </el-table>

        <div style="text-align: center;">
            <el-button type="primary" plain size="small" @click="saveResource">保存</el-button>
            <el-button type="primary" plain size="small" @click="$router.go(-1)">返回</el-button>
        </div>
    </page-main>
</template>

<script>
import menuApi from '@/api/system/menu'
import roleAuthorityApi from '@/api/system/roleAuthority'
export default {
    name: 'Menu',
    components: {  },
    data() {
        return  {
            tableData: [],
            ids: [], // Checkbox 选中的id
            checkedKeys: false, // 是否全选中变量
            selectAuth: []
        }
    },
    created() {},
    mounted() {
        this.tree()
    },
    methods: {
        tree() {
            let _this = this
            let p1 = new Promise(resolve => {
                menuApi.tree().then(res => {
                    _this.tableData = res.data.data
                    resolve()
                })

            })
            let p2 = new Promise(resolve => {
                roleAuthorityApi.getRoleResource(_this.$route.query.roleId).then(res => {
                    _this.selectAuth = res.data.data
                    resolve()
                })
            })
            Promise.all([p1, p2]).then(() => {
                // 递归找出需要勾选项
                _this.markSigin(_this.tableData, _this.selectAuth)
            }).catch(error => {
                console.log(error)
            })
        },
        // 递归找出需要勾选项
        markSigin(tableData, selectAuth) {
            let _this = this
            tableData.forEach(row => {
                if (selectAuth.length > 0) {
                    if (selectAuth.indexOf(row.id.toString()) >= 0) {
                        _this.$nextTick(() => {
                            _this.$refs.multipleTable.toggleRowSelection(row, true)
                        })
                    } else {
                        _this.$refs.multipleTable.clearSelection
                    }
                    if (row.children) {
                        _this.markSigin(row.children, selectAuth)
                    }
                }
            })
        },
        handleSelectionChange(val) {
            this.ids = val.map(item => item.id)
        },
        selectAll() {
            this.checkedKeys = !this.checkedKeys
            this.splite(this.tableData, this.checkedKeys)
        },
        /**
         * 处理数据
         */
        splite(data, flag) {
            let _this = this
            data.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row, flag)
                if (row.children) {
                    _this.splite(row.children, flag)
                }
            })
        },
        // 保存角色资源
        saveResource() {
            let roleId = this.$route.query.roleId
            roleAuthorityApi.saveResource({'roleId': roleId, authorityId: this.ids})
        }
    }
}
</script>
